import React, {Component} from 'react';
import {Breadcrumb, Layout, Menu} from 'antd';
import {NavLink, Redirect, Route, Switch, withRouter} from "react-router-dom";
import {LaptopOutlined, NotificationOutlined, UserOutlined} from '@ant-design/icons';

import 'antd/dist/antd.css'
import './Home.css'

import OneForm from "../MenuOne/OneForm";
import ReduxCount from "../MenuOne/ReduxCount";
import ComplaintList from "../MenuOne/ComplaintList";
import ReduxPerson from "../MenuOne/ReduxPerson";

const {SubMenu} = Menu;
const {Header, Content, Sider} = Layout;


class Home extends Component {
    render() {
        return (
            <div>
                <Layout>
                    <Header className="header">
                        <div className="logo"/>
                        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
                            <Menu.Item key="1">nav 1</Menu.Item>
                            <Menu.Item key="2">nav 2</Menu.Item>
                            <Menu.Item key="3">nav 3</Menu.Item>
                        </Menu>
                    </Header>
                    <Layout>
                        <Sider width={200} className="site-layout-background" style={{height: '80vh',overflowY: 'auto',overflowX:'hidden'}}>
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={['2']}
                                defaultOpenKeys={['sub1']}
                                style={{height: '100%', borderRight: 0}}
                            >
                                <SubMenu key="sub1" icon={<UserOutlined/>} title="subnav 1">
                                    <Menu.Item key="1"><NavLink to='/reduxCount'>reduxCount</NavLink></Menu.Item>
                                    <Menu.Item key="2"><NavLink to='/oneForm'>oneForm</NavLink></Menu.Item>
                                    <Menu.Item key="3"><NavLink to='/complaint'>complaint</NavLink></Menu.Item>
                                    <Menu.Item key="4"><NavLink to='/person'>person</NavLink></Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub2" icon={<LaptopOutlined/>} title="subnav 2">
                                    <Menu.Item key="5">option5</Menu.Item>
                                    <Menu.Item key="6">option6</Menu.Item>
                                    <Menu.Item key="7">option7</Menu.Item>
                                    <Menu.Item key="8">option8</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub3" icon={<NotificationOutlined/>} title="subnav 3">
                                    <Menu.Item key="9">option9</Menu.Item>
                                    <Menu.Item key="10">option10</Menu.Item>
                                    <Menu.Item key="11">option11</Menu.Item>
                                    <Menu.Item key="12">option12</Menu.Item>
                                </SubMenu>
                            </Menu>
                        </Sider>
                        <Layout style={{padding: '0 24px 24px'}}>
                            <Breadcrumb style={{margin: '16px 0'}}>
                                <Breadcrumb.Item>Nav1</Breadcrumb.Item>
                                {/*<Breadcrumb.Item>List</Breadcrumb.Item>*/}
                                {/*https://blog.csdn.net/qq_45227126/article/details/104528293 面包屑搭配路由变化*/}
                                <Breadcrumb.Item>{this.props.location.pathname.split('/')[1]}</Breadcrumb.Item>
                            </Breadcrumb>
                            <Content
                                className="site-layout-background"
                                style={{
                                    padding: 24,
                                    margin: 0,
                                    overflow: 'initial',
                                    height: '70vh',
                                    overflowY: 'auto',
                                }}
                            >
                                <Switch>
                                    {/*默认是模糊匹配 exact={true} 开启精准匹配*/}
                                    <Route path="/oneForm" component={OneForm}/>
                                    <Route path="/reduxCount" component={ReduxCount}/>
                                    <Route path="/complaint" component={ComplaintList}/>
                                    <Route path="/person" component={ReduxPerson}/>
                                    <Redirect to="/oneForm"/>
                                </Switch>
                            </Content>
                        </Layout>
                    </Layout>
                </Layout>
            </div>
        );
    }
}

export default withRouter(Home);